<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('名字测试')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <p>姓：</p>
                                <input type="text" name="xing"/>
                            </li>
                            <li>
                                <p>名：</p>
                                <input type="text" name="ming"/>
                            </li>
                            <li>
                                <p>出生时间：</p>
                                <input name="birthday" class="form-control" placeholder="yyyy-MM-dd HH:ss" type="text">
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="test()"><i class="fa fa-search"></i>&nbsp;测试</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table class='table table-bordered table-striped'>
                    <tr>
                        <td width="100">姓名:</td>
                        <td><span id="result_name"></span></td>
                    </tr>
                    <tr>
                        <td width="100">阳历生日:</td>
                        <td><span id="result_nbirthday"></span></td>
                    </tr>
                    <tr>
                      <td width="100">农历生日:</td>
                      <td><span id="result_birthday"></span></td>
                    </tr>
                    <tr>
                        <td>生辰八字:</td>
                        <td><span id="result_horoscope"></span></td>
                    </tr>
                    <tr>
                        <td>五格:</td>
                        <td><span id="result_wuge"></span></td>
                    </tr>
                    <tr>
                        <td>三才:</td>
                        <td><span id="result_sancai"></span></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">

        $("input[name='birthday']").datetimepicker({
            format: "yyyy-mm-dd hh:ii",
            weekStart: 1,
            autoclose: true,
            startView: 3,
            minView: 0,
            forceParse: false
        });

        function test(){
            var xing = $("input[name='xing']").val();
            var ming = $("input[name='ming']").val();
            var birthday = $("input[name='birthday']").val();

            //var xing = "石"
            //var ming = "翔文"
            //var birthday = "2021-11-26 18:10"

            if(!xing){
               $.modal.msgWarning("请输入您的姓");
               return;
            }

            if(!ming){
               $.modal.msgWarning("请输入您的大名");
               return;
            }

            if(!birthday){
               $.modal.msgWarning("请选择您的生日");
               return;
            }

            var year = birthday.substring(0, 4);
            var month = birthday.substring(5, 7);
            var date = birthday.substring(8, 10);
            var hour = birthday.substring(11, 13);
            var minute = birthday.substring(14, 16);

            console.log(birthday);
            console.log(year);
            console.log(month);
            console.log(date);
            console.log(hour);
            console.log(minute);

            var data = {
              xing: xing,
              ming: ming,
              gender: 1,
              year: year,
              month: month,
              date: date,
              hour: hour,
              minute: minute
            }

            var config = {
                url: 'https://testapi.youzhi.net/api/naming/nameEvaluation',
                type: "post",
                dataType: "json",
                data: data,
                beforeSend: function () {

                },
                success: function(result) {
                   console.log(result);
                   var data = result.data;

                   $("#result_name").html(`${xing}${ming}`);
                   $("#result_nbirthday").html(birthday);

                   $("#result_birthday").html(`${data.lunarBirthday.year}年 ${data.lunarBirthday.month}月 ${data.lunarBirthday.day} ${data.lunarBirthday.hour}时`);
                   $("#result_horoscope").html(`${data.horoscope.year} ${data.horoscope.month} ${data.horoscope.day} ${data.horoscope.hour}`);
                   var result_wuge = "<table class='table table-bordered table-striped'>";
                   result_wuge += "<tr>";
                   result_wuge += "<td>天格</td>";
                   result_wuge += `<td>${data.wuge.tian.ge}</td>`;
                   result_wuge += `<td>${data.wuge.tian.jixiong}</td>`;
                   result_wuge += `<td>${data.wuge.tian.analyse}</td>`;

                   result_wuge += "<tr>";
                   result_wuge += "<td>人格</td>";
                   result_wuge += `<td>${data.wuge.ren.ge}</td>`;
                   result_wuge += `<td>${data.wuge.ren.jixiong}</td>`;
                   result_wuge += `<td>${data.wuge.ren.analyse}</td>`;

                   result_wuge += "<tr>";
                   result_wuge += "<td>地格</td>";
                   result_wuge += `<td>${data.wuge.di.ge}</td>`;
                   result_wuge += `<td>${data.wuge.di.jixiong}</td>`;
                   result_wuge += `<td>${data.wuge.di.analyse}</td>`;

                   result_wuge += "<tr>";
                   result_wuge += "<td>外格</td>";
                   result_wuge += `<td>${data.wuge.wai.ge}</td>`;
                   result_wuge += `<td>${data.wuge.wai.jixiong}</td>`;
                   result_wuge += `<td>${data.wuge.wai.analyse}</td>`;

                   result_wuge += "<tr>";
                   result_wuge += "<td>总格</td>";
                   result_wuge += `<td>${data.wuge.zong.ge}</td>`;
                   result_wuge += `<td>${data.wuge.zong.jixiong}</td>`;
                   result_wuge += `<td>${data.wuge.zong.analyse}</td>`;

                   result_wuge += "</tr>";

                   result_wuge += "</table>";

                   $("#result_wuge").html(result_wuge);

                   var result_sancai = "<table class='table table-bordered table-striped'>";
                   result_sancai += `<tr>`
                   result_sancai += `<td>${data.sancai.sancai}</td>`
                   result_sancai += `<td>${data.sancai.jixiong}</td>`
                   result_sancai += `<td>${data.wuge.zong.analyse}</td>`
                   result_sancai += `</tr>`
                   result_sancai += `</table>`
                   $("#result_sancai").html(result_sancai);
                }
            };
            $.ajax(config)
        }

    </script>
</body>
</html>